<template>
  <div class="Information">
    <el-form :model="form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身高" :label-width="formLabelWidth">
            <el-input v-model="form.height" autocomplete="off" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="体重" :label-width="formLabelWidth">
            <el-input v-model="form.weight" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="form.age" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="form.sex" >
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="宗教信仰" label-width="100px">
            <el-input v-model="form.religion" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="13">
          <el-form-item label="过敏史" label-width="60px">
            <el-input v-model="form.allergy" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="是否患有疾病" label-width="100px">
            <el-select v-model="form.ill">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item v-if="form.ill==1" label="疾病名称" label-width="75px">
        <el-input v-model="form.illName" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitInformation">确 定</el-button>
    </div>
  </div>
</template>

<script>
    export default {
      name: "Information",
      props:{
        informationVisible:{
          type:Boolean,
          default:false
        }
      },
      data() {
        return {
          form: {
            name: '',
            height:'',
            weight:'',
            age:'',
            sex:'', //男的是1
            religion:'',
            allergy:'',
            ill:'', //患病是1
            illName:'',
          },
          formLabelWidth: '50px'
        };
      },
      watch: {
        informationVisible: function(newVal, oldVal){
          this.dialog=newVal;
        }
      },
      methods: {
        handleClose() {
          this.$confirm('是否放弃提交表单？')
            .then(()=>{
              this.closeDialog();
            })
            .catch(_ => {});
        },
        closeDialog(){
          this.$emit('closeDialog');
        },
        submitInformation(){
          this.$axios({
            url:'http://47.92.167.153:8085/user/information',
            method:'post',
            data:{
              information:this.form,
              token:this.token
            },
            headers:{
              'Content-Type':'application/json'  //如果写成contentType会报错
            }
          }).then((response)=>{
            let res=response.data;
            console.log(res);
            if (res.success){

            }
          }).catch(function(error){
            console.log(error)
          });
          this.$emit('closeDialog');
        }
      }
    }
</script>

<style scoped lang="stylus">
.Information
  box-sizing: border-box;
  padding: 20px 70px;
  .dialog-footer
    box-sizing border-box
    padding: 0 180px
</style>
